<template>
    <div class='tip-box' :style='getTime'>{{msg}}</div>
</template>

<script>
    // document.currentScript // 获取当前代码执行所在的script标签
    // document.currentScript.ownerDocument  // 获取当前标签所属的文档对象
    console.log(document.currentScript.ownerDocument);
    var TipBox = Vue.extend({
        // template: "<div class='tip-box' :style='getTime'>{{msg}}</div>",
        template:document.currentScript.ownerDocument.querySelector("template"),
        data: function () {
            return {
                msg: "我是一个弹窗",
                time: 3
            }
        },
        computed: {
            getTime() {
                return "animation-duration:" + this.time + "s";
            }
        },
        mounted() {
            document.body.appendChild(this.$el);
            setTimeout(() => {
                document.body.removeChild(this.$el);
                this.$destroy();
            }, this.time * 1000)
        },
    });

    function showTip(msg, time) {
        var tip = new TipBox();
        if (msg) {
            tip.msg = msg;
        }
        if (time) {
            tip.time = time;
        }
        tip.$mount();
        console.log(tip, tip.$el);
    }
</script>

<style>
    .tip-box {
        transform: translate(-50%, -100%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 10px 14px;
        position: fixed;
        top: 0px;
        left: 50%;
        border-radius: 6px;
        animation: tipFade 1;
        /* animation-duration: ; */

    }

    @keyframes tipFade {
        0% {
            transform: translate(-50%, -100%);
        }

        15% {
            transform: translate(-50%, 20px);
        }

        85% {
            transform: translate(-50%, 20px);
        }

        100% {
            transform: translate(-50%, -100%);
        }
    }
</style>